<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 50px auto;">
			
			
		</canvas>
		
	</body>
<script>
	var canvas = document.getElementById("canvas");
				 canvas.width =800;
	            canvas.height =800;	 
	        var context = canvas.getContext("2d");//2d环境
	        
	       // drawRoundRect(context,100,100,600,500,50);//调用  从100,100开始绘制一个宽600，高500 圆心半径50的圆角矩形
	     //调用绘制  2048
	     fillRoundRect(context,150,150,500,500,10,"#bbada0");
	     for(var i=0;i<4;i++){
	     	for(var j=0;j<4;j++){
	     		fillRoundRect(context,170+i*120,170+j*120,100,100,6,"#ccc0b3");//计算
	     	}
	     }
	     
	     
	        //普通方法调用
	        function drawRoundRect(cxt,x,y,width,height,radius){

	        	cxt.save();
	        	
	        	cxt.translate(x,y);//圆心位移到 x y
	        pathRoundRect(cxt,width,height,radius);//绘制
	      
	        	cxt.strokeStyle="black";
	        	cxt.stroke();
	        	cxt.restore();
	        }
	        //绘制的函数
	        function  pathRoundRect(cxt,width,height,radius){//环境，宽，高，度数
	        	cxt.beginPath();
	        	cxt.arc(width-radius,height-radius,radius,0,Math.PI/2);
	        	cxt.lineTo(radius,height);
	        	cxt.arc(radius,height-radius,radius,Math.PI/2,Math.PI);
	        	cxt.lineTo(0,radius);
	        	cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2);
	        	cxt.lineTo(width-radius,0);
	        	cxt.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2);
	        	
	        	cxt.closePath();
	        	
	        }
	        
	//绘制一个带颜色的圆角矩形
	function fillRoundRect(cxt,x,y,width,height,radius,fillColor){
		if(2*radius>width||2*radius>height){//
			alert("半径过大");
			return;
		}
		cxt.save();
		cxt.translate(x,y);
		pathRoundRect(cxt,width,height,radius);//
		cxt.fillStyle=fillColor||"black";//有值fillColor,没有black
		cxt.fill();
		cxt.restore();
		
		
	}
	//绘制一个边框的圆角矩形
		function strokRoundRect(cxt,x,y,width,height,radius,lineWidth,strokeColor){
		if(2*radius>width||2*radius>height){
			alert("半径过大");
			return;
		}
		cxt.save();
		cxt.translate(x,y);
		pathRoundRect(cxt,width,height,radius);
		cxt.lineWidth=lineWidth||2;//如果没有值  2
		cxt.strokStyle=strokeColor||"red";//线条颜色默认red
		cxt.stroke();
		cxt.restore();
		
		
	}
	
</script>
</html>
